<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 1em;
        }

        [aria-pressed="true"] {
            border: 2px solid red;
            background: #FAFAAE;
        }

        [aria-pressed="false"] {
            border: 2px solid #000;
        }

        .visually-hidden {
            position: absolute;
            overflow: hidden;
            clip: rect(0 0 0 0);
            height: 1px;
            width: 1px;
            margin: -1px;
            padding: 0;
            border: 0;
        }
    </style>
    <!-- 引入 jQuery 库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>

    <h1>Accessible HTML5 Audio Player</h1>

    <p>
        <button class="audio-ctrl play">listen to audio</button>
        <button class="audio-ctrl pause">pause</button>
        <button class="audio-ctrl read">read transcript</button>
    </p>

    <p class="visually-hidden audio-transcript" tabindex="0">This is an audio recording. You are hearing the audio.</p>

    <audio controls id="player">
        <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/test.mp3" type="audio/mpeg">
        <source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/audio.ogg" type="audio/ogg">
        <track src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/15309/transcription.vtt" label="English Captions"
            kind="subtitles" srclang="en-us" default />
        Your browser does not support HTML5 audio.
    </audio>
    <script>
        var $player = $(".audio-ctrl"),
            $transcript = $(".audio-transcript");

        $(".audio-ctrl").each(function () {

            $(this).attr("aria-pressed", "false");

            $(this).click(function (e) {
                e.preventDefault();

                $player.attr("aria-pressed", "false");

                if ($(this).hasClass("play")) {
                    $(this).attr("aria-pressed", "true");

                    // 2 sec delay to allow screen reader
                    // to read button state
                    setTimeout(function () {
                        $("#player")[0].play();
                    }

                        , 2000);
                }

                if ($(this).hasClass("pause")) {
                    $("#player")[0].pause();
                    $(this).attr("aria-pressed", "true");
                }

                if ($(this).hasClass("read")) {
                    $transcript.removeClass("visually-hidden").focus();
                }
            });
        });
    </script>
</body>

</html>